import React from 'react';
import { Icon, Modal, Button } from 'antd';
import './index.less';
import { WeaLocaleProvider } from "ecCom";
import isMobile from '../../../utils/mobileDetect';

const getLabel = WeaLocaleProvider.getLabel;

export default class CountDownView extends React.Component{
  constructor(props) {
    super(props);
    const { time } = props;
    const sumTime = time * 60;

    this.state = {
      sumTime: sumTime,
      hour: "",
      minute: "",
      second: "",
      visible: false,
      modalCount: 5
    };
  }

  componentDidMount() {
    this.formatTime();
  }

  componentWillUnmount() {
    clearInterval(this.timer);
    clearInterval(this.modalTimer);
  }

  formatTime = () => {
    this.timer = setInterval(() => {
      let { sumTime } = this.state;

      if(sumTime > 1) {
        sumTime--;

        let hour = Math.floor((sumTime / 3600) % 24);
        let minute = Math.floor((sumTime / 60) % 60);
        let second = Math.floor(sumTime % 60);

        this.setState({
          sumTime,
          hour: hour.toString().padStart(2, '0'),
          minute: minute.toString().padStart(2, '0'),
          second: second.toString().padStart(2, '0')
        })
      }else {
        clearInterval(this.timer);
        this.setState({
          hour: '',
          minute: '',
          second: '',
          visible: true
        }, () => {
            this.formatModal();
        })
      }
    }, 1000)
  }

  formatModal = () => {
    this.modalTimer = setInterval(() => {
      let { modalCount } = this.state;
      const { onSubmit } = this.props;

      if(modalCount > 1) {
        modalCount--;
        this.setState({ modalCount })
      }else {
        clearInterval(this.modalTimer);
        this.setState({ visible: false })
        onSubmit(true);
      }
    }, 1000)
  }

  handleOk = () => {
    clearInterval(this.modalTimer);

    const { onSubmit } = this.props;
    
    onSubmit(true);
    this.setState({ visible: false });
  }

  renderCountDown () {
    const { hour, minute, second } = this.state;
    const { isShowRepairTitle } = this.props;
    const isMobileView = isMobile();

    if(!second) return null;
    if (isMobileView) {
      return (
        <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@rncj0k`}>
          {
            second &&
            <div className='mobile-count-down' style={{ 'top': isShowRepairTitle ? 40 : 0 }}>
              <div className='content'>
                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@l2c7fu`} type="clock-circle-o" />
                <div>{`${hour} : ${minute} : ${second}`}</div>
              </div>
            </div>
          }
        </React.Fragment>
      );
    }

    const element = document.querySelector('.wea-edc-fv-wrapper > div');

    if (!element) return null;

    const eleLeft = element.offsetLeft;
    const left = eleLeft - 145;

    return (
      <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@vrahy0`}>
        {
          second &&
         <div className='count-down' style={{ left }}>
          <div className='surplus-time'>
              <div className='title'>{getLabel('519458', '剩 余 时 间') }</div>
            <div className='time'>{`${hour} : ${minute} : ${second}`}</div>
          </div>
         </div>
        }
      </React.Fragment>
    );

  }

  render () {
    const { hour, minute, second, visible, modalCount } = this.state;

    return (
      <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@gliu8c`}>
        {this.renderCountDown()}
        <Modal ecId={`${this && this.props && this.props.ecId || ''}_Modal@2qd0h3`}
          wrapClassName={'count-down-confirm'}
          visible={visible}
          title={<div><i className='icon-coms-Prompt ant-confirm-header-icon' />{getLabel('519453', '限时填写') }</div>}
          width={380}
          closable={false}
          footer={[
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7g70y0@footerButton`} key="submit" type="primary" size="large" onClick={this.handleOk}>
              {getLabel('519457', '我知道了')}({modalCount})
            </Button>
          ]}
        >
          <span>{getLabel('519456', '填写时间到，系统将自动为你提交数据！') }</span>
        </Modal>
      </React.Fragment>
    );
  }
}